<template>
  <div>
    <table border="1">
      <caption>欢迎光临vue开发的收银系统-水果店</caption>
      <tr>
        <td>苹果{{price}}￥/斤，折扣《8折》</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" v-model="num" ></td>
      </tr>
      <tr>
        <td><button @click="fn">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价：{{sum}}￥元 折后价：{{discountprice}} ￥元 省了：{{savaprice}} ￥元 </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {

  data() {
    return {
      price:10,
      num:0,
      sum:0,
      discountprice:0,
      savaprice:0
    };
  },

  mounted() {},

  methods: {
    fn(){
      // if (this.num.l) return alert('不能少于0')
      this.sum=this.num*this.price
      this.discountprice=this.sum*0.8
      this.savaprice=this.sum-this.discountprice
    }
  },
};
</script>

<style lang="less">
table {
  width: 1000px;
  height: 300px;
  text-align: center;
}
</style>